<template>
  <div>
    <el-dialog
        :visible.sync="dialogOpen"
        center
        @close="dialogOpen = false"
        width="40%"
        top="50px"
        v-if="dialogOpen"
    >
      <template slot="title">
        <div
            class="custom-header"
            :style="{
            backgroundColor: headerStyle,
            color: '#fff',
            height: '50px',
            lineHeight: '50px',
          }"
        >
          {{ title + '订单' }}
        </div>
      </template>
      <div class="flexBox">
        <p>
          <span>门店名称：</span>
          <el-select
              filterable
              remote
              allow-create
              :remote-method="inputChange"
              @input="changeVal"
              clearable
              value-key="orderId"
              v-model="occStoreName"
              size="small"
              style="width: 230px"
              placeholder="请选择"
          >
            <el-option
                v-for="item in saleNameList"
                :key="item.orderId"
                :label="item.storeName"
                :value="item.orderId"
            >
            </el-option>
          </el-select>
        </p>
        <p>
          <span>去货架时间：</span>
          <el-date-picker
              style="width: 230px"
              clearable
              size="small"
              value-format="yyyy-MM-dd"
              placeholder="请选择去货架时间"
              v-model="data.deliveryDate"
          ></el-date-picker>
        </p>
      </div>
      <div class="flexBox">
        <p>
          <span>所属品牌：</span>
          <el-select clearable size="small" style="width: 230px" placeholder="按品牌搜索" v-model="data.systemType">
            <el-option v-for="(a,i) in systemList" :value="a.id" :label="a.systemName" :key="i"></el-option>
          </el-select>
        </p>
        <p>
          <span>施工方联系方式：</span>
          <el-input
              size="small"
              style="width: 230px"
              placeholder="请输入施工方联系方式"
              v-model="data.customPhone"
          ></el-input>
        </p>
      </div>
      <div class="flexBox">
        <p>
          <span>订单类型：</span>
          <el-select
              size="small"
              style="width: 230px"
              placeholder="请选择订单类型"
              v-model.number="data.orderType"
          >
            <el-option label="新增店铺" :value="1"></el-option>
            <el-option label="老店翻新" :value="2"></el-option>
            <el-option label="新增店铺含利旧" :value="3"></el-option>
          </el-select>
        </p>
        <p>
          <span>发货仓库：</span>
          <el-select
              size="small"
              style="width: 230px"
              placeholder="请选择订单发货仓库"
              v-model="data.area"
          >
            <el-option
                :label="item.areaName"
                :value="item.area"
                :key="item.area"
                v-for="item in areaData"
            ></el-option>
          </el-select>
        </p>
      </div>
      <div class="flexBox">
        <p>
          <span>仓库到门店导航距离：</span>
          <el-input
              size="small"
              style="width: 230px"
              @input="changeDistance"
              placeholder="请输入距离(/公里)"
              v-model="data.distance"
          ></el-input>
        </p>
        <p>
          <span>门店地址：</span>
          <el-input
              size="small"
              placeholder="请输入门店地址"
              type="textarea"
              style="width: 230px"
              v-model="data.address"
          ></el-input>
        </p>
      </div>
      <div class="flexBox">

        <p>
          <span>快递费用：</span>
          <el-input
              size="small"
              disabled
              style="width: 230px"
              placeholder="请输入费用"
              v-model="data.expressCharge"
          ></el-input>
        </p>
        <p style="width: 310px; display: flex">
          <span style="width: 110px">营业区原始图：</span>
          <uploader v-model="fileList1" :headerStyle="headerStyle"></uploader>
        </p>
      </div>
      <div class="flexBox">
        <p style="width: 310px; display: flex">
          <span style="width: 100px">仓库原始图：</span>

          <uploader v-model="fileList2" :headerStyle="headerStyle"></uploader>
        </p>
        <p>
          <span>遗留订单：</span>
          <el-select
              size="small"
              style="width: 230px"
              placeholder="请选择是否为遗留订单"
              v-model.number="data.isHistoryOrder"
          >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="2"></el-option>
          </el-select>
        </p>
      </div>
      <div class="flexBox">

        <!-- <p><span>付款卡号：</span>
          <el-input size="small" style="width: 230px" placeholder="请输入卡号" v-model="data.payCard"></el-input>
        </p> -->
        <p>
          <span>付款方式：</span>
          <el-select
              size="small"
              style="width: 230px"
              placeholder="请选择付款方式"
              v-model.number="data.goodsPaymentMethod"
          >
            <el-option
                v-for="(item, index) in payTypeList"
                :key="index"
                :label="item.name"
                :value="item.id"
            ></el-option>
          </el-select>
        </p>
        <p>
          <span>面积/平方：</span>
          <el-input
              size="small"
              style="width: 230px"
              placeholder="请输入面积"
              v-model="data.storeArea"
          ></el-input>
        </p>
      </div>
      <div class="flexBox">
        <p style="width:95%">
          <span style="width: 100px">是否卡游层板：</span>
          <el-switch
              v-model.number="data.isKaYou"
              :activeValue="1"
              :inactiveValue="0"
          ></el-switch>
        </p>
      </div>
      <span slot="footer">
        <el-button @click="dialogOpen = false">取 消</el-button>
        <el-button
            @click="_submit"
            :style="{ background: headerStyle, color: '#ffffff', border: 'none' }"
        >提 交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import uploader from '../../../components/Element/Uploader.vue'

export default {
  name: 'add',
  components: {
    uploader,
  },
  data() {
    return {
      dialogOpen: false,
      areaData: [],
      payTypeList: [],
      saleNameList: [],
      systemList: [],
      title: '',
      occStoreName: "",
      fileList1: '',
      fileList2: '',
      systemType: '',
      data: {
        storeName: '',
        id: '',
        systemType: "",
        deliveryDate: '',
        customPhone: '',
        orderType: '',
        area: '',
        address: '',
        expressCharge: '',
        distance: '',
        isHistoryOrder: '',
        payCard: '', //付款卡号
        storeArea: '',
        goodsPaymentMethod: null, //付款方式 1 9076 2 5127 3 6666 4 曹总微信 5 财务2微信 6 曹总支付宝
        isKaYou: '',
      },
    }
  },
  computed: {
    headerStyle() {
      const colorMap = {
        1: '#409EFF',
        2: '#121552',
        3: '#67C23A',
        4: '#E6A23C',
        5: '#F56C6C',
        6: '#2E8B57',
        7: '#9A7DFF',
        8: '#FF7F50',
        9: '#00CED1',
        10: '#9370DB',
        11: '#4682B4',
        12: '#8B008B',
        13: '#20B2AA',
        14: '#662565',
      }
      return colorMap[String(this.systemType)] || '#66b1ff'
    },
  },
  methods: {
    async getSystemType() {
      const res = await this.$api.orderGetSystemTypeVo()
      this.systemList = res
    },
    changeVal(val) {
      this.occStoreName = val
    },
    inputChange(val) {
      if (val) {
        const params = {
          storeName: val,
        }
        this.$api.orderGetOrderInfoLikeName(params).then((res) => {
          this.saleNameList = res
        })
      }
    },
    async getPayType() {
      const res = await this.$api.orderGetPaymentMethod()
      if (res && res.length) {
        this.payTypeList = []
        this.payTypeList = res
      }
    },
    changeDistance(val) {
      this.data.expressCharge = val * 4
    },
    handleOpen(row, area, type) {
      this.dialogOpen = true
      this.getPayType()
      this.getSystemType()
      this.occStoreName = ""
      this.systemType = row.systemType
      this.areaData = area
      if (type == 1) {
        this.title = '新增'
        this.data = this.$options.data.call(this).data
        this.fileList1 = ''
        this.fileList2 = ''
      }
      if (type == 2) {
        this.title = '录入货架信息'
        this.inputChange(row.storeName)
        this.getPayType()
        Object.keys(this.data).forEach((key) => {
          if (row.hasOwnProperty(key)) {
            this.data[key] = row[key]
            this.data.id = row.id

            this.data.storeName = row.storeName
            this.occStoreName = row.id
            this.fileList1 = row.storeImgs ? row.storeImgs.toString() : ''
            this.fileList2 = row.storageOriginImg
                ? row.storageOriginImg.toString()
                : ''
          }
        })
      }
    },
    async _submit() {
      let form = this.data
      const isNumber = typeof this.occStoreName === 'number' || (!isNaN(this.occStoreName) && this.occStoreName !== '');
      if (isNumber) {
        console.log('num')
        this.data.id = Number(this.occStoreName);
        this.data.storeName = this.saleNameList.find(item => item.orderId === this.occStoreName).storeName
      } else {
        console.log('str')
        this.data.id = '';
        this.data.storeName = this.occStoreName;
      }
      if (!this.data.systemType) return this.$message.warning('请选择所属品牌！')
      // form.systemType = this.systemType
      form.storeImgs = this.fileList1
      form.storageOriginImg = this.fileList2
      form.storageOriginImg = Array.isArray(form.storageOriginImg)
          ? form.storageOriginImg
          : [form.storageOriginImg]
      form.storeImgs = Array.isArray(form.storeImgs)
          ? form.storeImgs
          : [form.storeImgs]
      if (!/^\d+$/.test(form.distance))
        return this.$message.warning('距离应为纯数字！')
      try {
        const apiMap = {
          新增: this.$api.newOrderCreate,
          录入货架信息: this.$api.orderOrderInfoUpdate,
        }
        const apiFunc = apiMap[this.title]
        if (!apiFunc) return
        const resDate = await apiFunc(form)
        this.$message.success(`${this.title}成功！`)
        this.dialogOpen = false
        this.$emit('addStatus', 1)
      } catch (err) {
        console.error('接口请求出错：', err)
        this.$message.error('操作失败，请稍后重试')
      }
    },
  },
}
</script>

<style scoped lang="less">
/deep/ .el-dialog__header {
  padding: 0;
  font-size: 16px;
}

.flexBox {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;

  p {
    display: flex;
    align-items: center;
  }

  span {
    width: 80px;
    display: inline-block;
  }
}
</style>
